import React, { useEffect, useState,useRef } from 'react';
import { Table, Button, Modal, Tree, Input, message, Popconfirm } from 'antd';
import axios from 'axios';

const RoleList = () => {
  // 状态管理
  const [roles, setRoles] = useState([]); // 存储角色列表数据
  const [loading, setLoading] = useState(false); // 加载状态
  const [isModalVisible, setIsModalVisible] = useState(false); // 控制模态框显示
  const [currentRole, setCurrentRole] = useState(null); // 当前选中的角色
  const [checkedKeys, setCheckedKeys] = useState([]); // 树形控件选中的节点
  const [selectedMenus, setSelectedMenus] = useState([]); // 存储选中的菜单路径
  const [treeData, setTreeData] = useState([]); // 存储菜单树数据
  const selectedMenusRef = useRef([]);
  const [isAddModalVisible, setIsAddModalVisible] = useState(false); // 控制添加角色模态框显示
  const [addRoleTitle, setAddRoleTitle] = useState(''); // 新角色名称
  const [addCheckedKeys, setAddCheckedKeys] = useState([]); // 新角色选中的菜单

  
  // 组件加载时获取角色列表和菜单树
  useEffect(() => {
    fetchRoles();
    fetchMenus();
  }, []);

  // 获取角色列表数据
  const fetchRoles = async () => {
    try {
      setLoading(true);
      const response = await axios.get('http://localhost:3000/getRoles');
      setRoles(response.data.data);
    } catch (error) {
      console.error('获取角色列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 获取菜单树数据
  const fetchMenus = async () => {
    try {
      setLoading(true);
      const response = await axios.get('http://localhost:3000/getMenuTree');
      setTreeData(response.data.data);
    } catch (error) {
      console.error('获取角色列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 点击分配菜单按钮，打开模态框
  const showMenuModal = (record) => {
    console.log(record); // 打印当前选中的角色信息
    
    setCurrentRole(record);
    // 将字符串格式的菜单权限转换为数组
    setSelectedMenus(record.menus.split(',') || []);
    setCheckedKeys(record.menus.split(',') || []);
    setIsModalVisible(true);
  };

  // 获取所有被选中的节点及其所有父节点
  function getAllCheckedKeysWithParents(treeData, checkedKeys) {
    const keySet = new Set(checkedKeys);

    // 辅助递归函数
    function traverse(nodes, parentKey = null) {
      nodes.forEach(node => {
        if (keySet.has(node.key) && parentKey) {
          keySet.add(parentKey);
        }
        if (node.children && node.children.length > 0) {
          traverse(node.children, node.key);
        }
      });
    }

    traverse(treeData);
    return Array.from(keySet);
  }

  // 点击确认按钮，保存权限设置
  const handleOk = async () => {
    try {
      setLoading(true);
      // 自动补全所有父节点
      const allKeys = getAllCheckedKeysWithParents(treeData, checkedKeys);
      await axios.post('http://localhost:3000/updateRoleMenus', {
        _id: currentRole._id,
        menus: allKeys.join(',')
      });
      setCheckedKeys(allKeys);
      setIsModalVisible(false);
      await fetchRoles();
    } catch (error) {
      console.error('更新菜单失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 点击取消按钮，关闭模态框
  const handleCancel = () => {
    setIsModalVisible(false);
    setCurrentRole(null);
    setSelectedMenus([]); // 清空选中的菜单
  };

  // 处理树节点选中状态变化
  const onCheck = (checkedObj) => {
    // checkedObj: { checked: [...], halfChecked: [...] }
    setCheckedKeys(checkedObj.checked);
    setSelectedMenus(checkedObj.checked);
    selectedMenusRef.current = checkedObj.checked;
  };

  // 打开添加角色模态框
  const showAddRoleModal = () => {
    setIsAddModalVisible(true);
    setAddRoleTitle('');
    setAddCheckedKeys([]);
  };

  // 处理添加角色树节点选中
  const onAddCheck = (checkedObj) => {
    setAddCheckedKeys(checkedObj.checked);
  };

  // 确认添加角色
  const handleAddOk = async () => {
    if (!addRoleTitle.trim()) {
      message.error('请输入角色名称');
      return;
    }
    try {
      setLoading(true);
      await axios.post('http://localhost:3000/addRole', {
        title: addRoleTitle,
        menus: addCheckedKeys.join(',')
      });
      setIsAddModalVisible(false);
      await fetchRoles();
      message.success('添加角色成功');
    } catch (error) {
      message.error('添加角色失败');
    } finally {
      setLoading(false);
    }
  };

  // 取消添加角色
  const handleAddCancel = () => {
    setIsAddModalVisible(false);
    setAddRoleTitle('');
    setAddCheckedKeys([]);
  };

  // 删除角色
  const handleDeleteRole = async (role) => {
    try {
      setLoading(true);
      await axios.post('http://localhost:3000/deleteRole', { _id: role._id });
      message.success('删除角色成功');
      await fetchRoles();
    } catch (error) {
      message.error('删除角色失败');
    } finally {
      setLoading(false);
    }
  };

  // 表格列配置
  const columns = [
    {
      title: '角色名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          <Button 
            type="primary" 
            size="small" 
            onClick={() => showMenuModal(record)}
            style={{ marginRight: 8 }}
          >
            分配菜单
          </Button>
          <Popconfirm
            title="确定要删除该角色吗？"
            onConfirm={() => handleDeleteRole(record)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="primary" danger size="small">删除</Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h1>角色列表</h1>
      <Button type="primary" onClick={showAddRoleModal} style={{ marginBottom: 16 }}>添加角色</Button>
      {/* 角色列表表格 */}
      <Table 
        columns={columns}
        dataSource={roles}
        rowKey="_id"
        loading={loading}
      />
      {/* 分配菜单的模态框 */}
      <Modal
        title="修改角色菜单"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        confirmLoading={loading}
      >
        {/* 菜单权限树形控件 */}
        <Tree
          checkable
          checkStrictly={true}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          treeData={treeData}
          defaultExpandAll={true}
        />
      </Modal>
      {/* 添加角色的模态框 */}
      <Modal
        title="添加角色"
        open={isAddModalVisible}
        onOk={handleAddOk}
        onCancel={handleAddCancel}
        confirmLoading={loading}
      >
        <Input
          placeholder="请输入角色名称"
          value={addRoleTitle}
          onChange={e => setAddRoleTitle(e.target.value)}
          style={{ marginBottom: 16 }}
        />
        <Tree
          checkable
          checkStrictly={true}
          onCheck={onAddCheck}
          checkedKeys={addCheckedKeys}
          treeData={treeData}
          defaultExpandAll={true}
        />
      </Modal>
    </div>
  );
};

export default RoleList; 